<template>
  <div class="integral-coupons">
    <m-header title="我的物品">
    </m-header>
    <tab class="custom-tabnav" custom-bar-width="1rem">
      <tab-item v-for="(item, index) in tabList" :key="index"
        :selected="tabIndex===index" @on-item-click="handleTabClick">{{item}}</tab-item>
    </tab>
    <!-- <div class="minegoods-model"> -->
      <component :is="currentView[tabIndex]"></component>
    <!-- </div> -->
  </div>
</template>
<script>
import Integral from './Integral';
import Coupons from './Coupons';

export default {
  components: {
    Integral,
    Coupons
  },
  data () {
    return {
      tabIndex: 0,
      currentView: [Integral, Coupons],
      tabList: ['积分', '优惠券']
    }
  },
  created () {
    this.tabIndex = this.$route.query.type * 1 || 0;
  },
  methods: {
    handleTabClick (index) {
      this.tabIndex = index;
      this.$router.replace({name: 'Goods', query: { type: index }});
    }
  }
}
</script>
<style lang="less" scoped>
  .integral-coupons {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f7f7f7;
    .custom-tabnav {
      position: fixed;
      top: 0.92rem;
      width: 100%;
      z-index: 10;
    }
    // .minegoods-model {
    //   // // position: relative;
    //   // // top: 1.72rem;
    //   // // background: #f7f7f7;
    //   // position: absolute;
    //   // width: 100%;
    //   // // top: 1.72rem;
    //   // top: 2.62rem;
    //   // bottom: 0.98rem;
    //   // background: #f7f7f7;
    //   // overflow-y: scroll;
    //   position: absolute;
    //   top: 1.72rem;
    //   bottom: 0;
    //   width: 100%;
    // }
  }

</style>
